import { Component, OnInit } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import { NzMessageService } from 'ng-zorro-antd';
// import { InfiniteScroll } from 'angular2-infinite-scroll';

const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

@Component({
	selector: 'app-product',
	templateUrl: './product.component.html',
	styleUrls: ['./product.component.scss'],
})
export class ProductComponent implements OnInit {
	data: any[] = [
	{
		title: '商品 1',
		img:'../../assets/img/s1.jpg',
		price:'123.60',
		intro:'陪睡门再出重大丑闻，80岁的父亲50岁的儿子共享张紫妍'
	},
	{
		title: '商品 2 长标题长标题长标题长标题长标题',
		img:'../../assets/img/s2.jpg',
		price:'12523.00',
		intro:'“优衣库”女主再现，颜值爆表，最新男友“优衣库”女主再现，颜值爆表，最新男友“优衣库”女主再现，颜值爆表，最新男友“优衣库”女主再现，颜值爆表，最新男友'
	},
	{
		title: '商品 3',
		img:'../../assets/img/s3.jpg',
		price:'123.00',
		intro:'斗鱼张琪格又回来了，cosplay不知火舞，露出太多精彩'
	},
	{
		title: '商品 4',
		img:'../../assets/img/s4.jpg',
		price:'123.00',
		intro:'外国小伙坐地铁遭人围观，一看他的手，我笑了'
	},
	{
		title: '商品 5',
		img:'../../assets/img/s5.jpg',
		price:'123.00',
		intro:'9位日本70后女星，没有玻尿酸，真实自然有个性的美丽'
	},
	{
		title: '商品 6',
		img:'../../assets/img/s6.jpg',
		price:'123.00',
		intro:'90后男子玻璃里面放钱只要砸开就能拿走商家:一群傻子在这里敲'
	},
	{
		title: '商品 7',
		img:'../../assets/img/s7.jpg',
		price:'1123.00',
		intro:'抖音女神直播易容级卸妆全过程！实在太太太太太太太刺激了！'
	},
	{
		title: '商品 8',
		img:'../../assets/img/s8.jpg',
		price:'123.00',
		intro:'女子爆料fps选手睡遍所有女房管！游戏圈也如此之乱？'
	},
	{
		title: '商品 9',
		img:'../../assets/img/s9.jpg',
		price:'123.00',
		intro:'男子不满护士女友提分手，强行押到宾馆，男子: 就是要让你怀孕'
	}
	];
	loading = false;
	hasMore = true;
	constructor(private http: HttpClient, private msg: NzMessageService) {}
	ngOnInit(): void {
		this.getData((res: any) => console.log('页面数据加载成功'));
		}

		getData(callback: (res: any) => void): void {
			this.http.get(fakeDataUrl).subscribe(
				(val:object) => {
					console.log("POST call successful value returned in body", 
						val);
					const res = (<any>val).results;
					for(let i = 0;i<res.length;i++){
						res[i].title = res[i].name.first+res[i].name.last;
						res[i].img='../../assets/img/s1'+i+'.jpg';
						res[i].price = '0.00';
						res[i].intro = '接口返回数据'+res[i].email;
					}
					this.data = this.data.concat(res);
					callback && callback((res:any)=>res());
					this.msg.info('信息加载成功');
				},
				(response:object) => {
					console.log("POST call in error", response);
				},
				() => {
					console.log("The POST observable is now completed.");
				}
				);
		}
		onScroll(): void {
			if (this.loading) return;
			this.loading = true;
			if (this.data.length > 44) {
				console.log('没有更多数据');
				this.msg.warning('没有更多数据');
				this.hasMore = false;
				this.loading = false;
				return;
			}
			this.getData(() => {
				console.log('callback');
				this.loading = false;
			});
		}

	}
